import React, { Component } from 'react'

export default class Footer extends Component {
  render() {
    const { changeList, list, clearDone } = this.props
    return (
      <>
        <footer className="footer">
          <span className="todo-count">
            <strong>{list.filter((item) => !item.done).length}</strong> 剩余
          </span>
          <ul className="filters">
            <li>
              <a
                className="selected"
                href="#/"
                onClick={() => {
                  changeList('All')
                }}
              >
                所有
              </a>
            </li>
            <li>
              <a
                href="#/active"
                onClick={() => {
                  changeList('Active')
                }}
              >
                进行中
              </a>
            </li>
            <li>
              <a
                href="#/completed"
                onClick={() => {
                  changeList('Completed')
                }}
              >
                已完成
              </a>
            </li>
          </ul>
          <button className="clear-completed" onClick={clearDone}>
            清除已完成
          </button>
        </footer>
      </>
    )
  }
}
